<template>
	<view>
		<view class="bepartner">
			<view class="bebg">
				<image src="/static/image/index/bgs1.png"></image>
			</view>

			<view class="beimg">
				<image src="/static/image/index/becomplaint.png" alt=""></image>
			</view>

			<view class="befont">
				有奖投诉
			</view>
		</view>
		<view class="basicf">
			<view class="fcomp">
				投诉类型选择
			</view>
			<view class="putaway">
				<radio-group name="" @change="radioChange">
					<view class="complain-radio" v-for="(item,index) in comType" :key="index">
						<view class="reward" @click="click(index)">
							<text>选择奖励{{item.quota}}元的投诉类型</text>
							<image src="/static/image/icon/arrow-right.png" class="img"
								:class=" active == index ? '' : 'active'"></image>
						</view>
						<label class="radio" v-if="active == index && i.type == item.type" v-for="(i,idx) in list"
							:key="idx">
							<view class="radio-item">
								<radio class="change" :checked="current == idx" :value="i.title" />
								<text>{{i.title}}</text>
							</view>
						</label>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="basicf" @click="lookat">
			<view class="fidmg">
				投诉得到5W元机会，点击进入
			</view>
		</view>
		<view class="lookimg" v-if="islookimg" @tap="lookup" @touchmove.stop.prevent>
			<scroll-view scroll-y style="height: 100vh;">
				<image class="image" style="width: 100%;" :src="checkimg" mode="widthFix"></image>
				<image class="close" src="/static/image/icon/clear.png" mode=""></image>
			</scroll-view>
		</view>
		<view class="basicf">
			<view class="fcomp">
				投诉原因
			</view>
			<textarea name="" :value="content" id="" @blur="blur" maxlength="-1" cols="30" rows="10"
				placeholder="请清晰详细描述投诉的原因" placeholder-style="font-size:24rpx;color:#999;" class="textaera"></textarea>
		</view>
		<view class="basicf">
			<view class="fidmg">上传图片</view>
			<view class="fidimgs">
				<app-upload-image :value="imgs" @image-event="imageEvent" maxNum="100" margin="0"></app-upload-image>
			</view>
		</view>
		<view class="befbutton">
			<button class="fbutton" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import appUploadImage from '../../components/basic-component/app-upload-image/app-upload-image'
	export default {
		components: {
			appUploadImage
		},
		data() {
			return {
				cliIndex: 0,
				active: 0,
				list: [],
				current: -1,
				comType: [{
						quota: '300',
						type: 100
					},
					{
						quota: '1000',
						type: 300
					},
				],
				title: '',
				type: '',
				content: '',
				imgs: [],
				pid: 0,
				pic_url: '',

				checkimg: '',
				islookimg: false
			}
		},
		onLoad() {
			this.clifiComplaint()
			this.allReq()
		},
		methods: {
			lookat() {
				this.islookimg = true
			},
			lookup() {
				this.islookimg = false
			},
			allReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 2165,
						status: 1
					}
				}).then((res) => {
					// console.log(res);
					this.checkimg = res.data.list[0].icon_url
				}).catch(() => {

				})
			},
			clifiComplaint() {
				this.$request({
					url: this.$api.complaint.catcomplaint,
					data: {
						status: 1
					},
				}).then((res) => {
					this.list = res.data.list
				}).catch((err) => {
					console.log(err);
				})
			},
			click(index) {
				if (this.active === index) {
					this.active = -1
				} else {
					this.active = index
				}
			},
			radioChange: function(e) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].title === e.target.value) {
						this.current = i;
						this.title = e.target.value
						this.type = this.list[i].type
						this.pid = this.list[i].id
						break;
					}
				}
			},
			blur(e) {
				this.content = e.target.value
			},
			imageEvent(e) {
				this.pic_url = e.imageList.toString();
			},
			submit() {
				if (this.title == '') {
					uni.showToast({
						title: "请选择投诉类型",
						icon: 'none'
					});
					return;
				} else if (this.content == '') {
					uni.showToast({
						title: "请填写投诉原因",
						icon: 'none'
					});
					return;
				} else if (this.pic_url == '') {
					uni.showToast({
						title: "请上传图片或者截图",
						icon: 'none'
					});
					return;
				}
				let cont = {
					content: this.content
				}
				// console.log(this);
				this.$request({
					url: this.$api.complaint.subcomplaint,
					data: {
						type: this.type,
						content: JSON.stringify(cont),
						pid: this.pid,
						title: this.title,
						pic_url: this.pic_url
					},
					method: 'post'
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "提交成功",
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				}).catch(() => {

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bepartner {
		width: 686rpx;
		height: 136rpx;
		margin: 20rpx 32rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.bebg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.bebg image {
		height: 136rpx;
		width: 136rpx;
	}

	.beimg {
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		left: 106rpx;
		top: 20rpx;
	}

	.beimg image {
		width: 96rpx;
		height: 96rpx;
	}

	.befont {
		position: absolute;
		left: 234rpx;
		line-height: 136rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	/* 选择 */
	.putaway {
		width: 550rpx;
		margin: 0 auto;

		.complain-radio {
			.reward {
				padding: 10rpx 20rpx;
				box-shadow: 0px 30px 60px rgba(57, 57, 57, 0.1);
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.radio {
				display: flex;
				flex-direction: column;
			}

			.radio-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.change {
					transform: scale(0.7);
				}
			}
		}

		.img {
			height: #{22rpx};
			width: #{12rpx};
			margin-right: #{16rpx};
			transform: rotate(90deg);
		}

		.img.active {
			transform: rotate(-90deg);
		}
	}

	/* 投诉原因 */
	.fcomp {
		width: 550rpx;
		margin: 0 auto;
		line-height: 42rpx;
		color: #333333;
		font-size: 28rpx;
	}

	.textaera {
		width: 550rpx;
		height: 318rpx;
		padding: 24rpx 36rpx;
		border-radius: 16rpx;
		background: #F4F4F4;
		margin: 30rpx auto;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.lookimg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #000000;
		z-index: 999;

		.image {
			width: 100%;
		}

		.close {
			position: fixed;
			right: 30rpx;
			top: 30rpx;
			width: 52rpx;
			height: 52rpx;
			z-index: 1000;
		}
	}

	/* 身份证照片 */
	.basicf {
		padding: 42rpx 0;
		width: 686rpx;
		background-color: #FFFFFF;
		margin: 32rpx auto;
		border-radius: 32rpx;
	}

	.fidmg {
		width: 550rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #F2F2F2;
		line-height: 72rpx;
		color: #333333;
		font-size: 28rpx;
	}

	.fidimgs {
		width: 550rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.fidcard {
		background: #FFFFFF;
		width: 170rpx;
		height: 192rpx;
		border: 2rpx solid #F4F4F4;
		box-sizing: border-box;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.fidcardup {
		background: #F4F4F4;
		width: 170rpx;
		height: 126rpx;
		position: relative;
	}

	.fidcardup-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 46rpx;
		top: 62rpx;
		background: #FFFFFF;
	}

	.fidcardup-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 46rpx;
		top: 62rpx;
		background: #FFFFFF;
		transform: rotate(90deg);
	}

	.fidcardt {
		line-height: 64rpx;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}

	.befbutton {
		background: #342B2A;
		border-radius: 64rpx;
		width: 480rpx;
		height: 96rpx;
		margin: 48rpx auto;
		overflow: hidden;
	}

	.fbutton {
		background: #342B2A;
		border-radius: 64rpx;
		width: 480rpx;
		height: 96rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 36rpx;
	}
</style>
